<template>
	<view class="wanl-withdraw">
		<view class="edgeInsetTop"> </view>
		<view class="padding-tb-bj" @tap="$wanlshop.to('/pages/user/bank/bank?choice=1')">
			<view class="bank" v-if="bankData">
				<image :src="$wanlshop.oss(bankData.image)"></image>
				<view class="content">
					<text>{{bankData.bankName}}</text>
					<view class="wanl-gray">
						<text>尾号 {{getCode(bankData.cardCode)}} {{getType(bankData.cardType)}}</text>
					</view>
				</view>
				<view class="action">
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
			<view class="bank" v-else>
				<view class="content" style="height: 80rpx; line-height: 80rpx;">
					<text>选择提现账户</text>
				</view>
				<view class="action">
					<text class="wlIcon-fanhui2"></text>
				</view>
			</view>
		</view>
		
		<view class="padding-bj bg-white money">
			<view class="text-lg">
				<text>提现金额</text>
				<text class="text-sm wanl-gray" v-if="servicefee > 0">（费率 {{servicefee/10}}%）</text>
			</view>
			<view class="margin-tb-bj price">
				<view class="symbol">
					<text>￥</text>
				</view>
				<input type="digit" maxlength="5" focus @input="replaceInput"/>
				<view class="text-lg wanl-gray-light" @tap="emptyInput" v-if="money">
					<text class="wlIcon-shibai"></text>
				</view>
			</view>
			<view class="solid-top padding-top-bj">
				<block v-if="servicefee > 0">
					<text class="wanl-gray-light">服务费</text>
					<text class="text-price text-orange margin-left-xs">{{servicemoney}}</text>
					<text class="wanl-gray-light">，</text>
				</block>
				<text class="wanl-gray-light">可用余额</text>
				<text class="wanl-gray-light margin-lr-xs text-price">{{usermoney}}</text>
				<!-- <text class="text-orange" v-if="usermoney > 0" @tap="moneyAll">全部</text> -->
			</view>
		</view>
		<view class="padding-bj margin-top">
			<!-- 1.0.5升级 -->
			<button class="mix-btn bg-green" :loading="loading" :disabled="loading" @tap="withdraws">提现</button>
		</view>
		
		
		<uni-popup ref="popup" type="bottom">
			<view class="popup-modal">
				<view>
					<view class="auth">
						<view class="auth-title" style="padding-top: 30rpx">输入支付密码</view>
						<view class="codes">
							<view v-for="item in config.count" :key="item.key">
								<view class="input" @tap="hanldeOpenKeyboard"
									:class="{ active: currentFocus == item.index }">
									<template v-if="code[item.index - 1] != undefined">
										<!-- {{ code[item.index - 1] }} -->*
									</template>
									<template v-else>
										<view v-if="currentFocus == item.index" class="shining"></view>
									</template>
								</view>
							</view>
						</view>
					</view>
					<wanl-keyboards :open="keyboardVisible" @number="inputCode" @delete="deleteCode"
						@empty="emptyCode" />
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				bankData: null,
				usermoney: 0,
				money: null,
				servicemoney: 0,
				servicefee: 0,
				loading: false,
				
				config: {
					count: [{
							index: 1,
							key: 'valid-code-input-1'
						},
						{
							index: 2,
							key: 'valid-code-input-2'
						},
						{
							index: 3,
							key: 'valid-code-input-3'
						},
						{
							index: 4,
							key: 'valid-code-input-4'
						},
						{
							index: 5,
							key: 'valid-code-input-5'
						},
						{
							index: 6,
							key: 'valid-code-input-6'
						}
					]
				},
				keyboardVisible: true,
				currentFocus: 1,
				code: [],
			};
		},
		computed: {
			...mapState(['user', 'common'])
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			async loadData() {
				// 服务费
				this.usermoney = this.user.money.money1;
				this.servicefee = this.common.appConfig.user_tixian_fee;
				await uni.request({
					url: '/wanlshop/pay/initialWithdraw',
					method: 'POST',
					success: res => {
						//获取提现账户
						this.bankData = res.data.bank;
					}
				});
			},
			withdraws() {
				// 1.0.5升级 修复针对多次点击
				if(this.loading) return;
				// 1.0.6升级
				let money = parseFloat(this.money),
					usermoney = parseFloat(this.usermoney);
				if(!this.bankData){
					this.$wanlshop.msg('请选择账号');
					return;
				}
				// if(money < this.common.appConfig.user_tixian_min){
				// 	this.$wanlshop.msg('提现金额不能小于 ' + this.common.appConfig.user_tixian_min + ' 元');
				// 	return;
				// }
				if(money > usermoney) {
					return this.$wanlshop.msg('余额不足')
				}
				// if(money > this.common.appConfig.user_tixian_max){
				// 	return this.$wanlshop.msg(`提现金额不能超过${this.common.appConfig.user_tixian_max}元`);
				// }
				this.$refs.popup.open('bottom')
			},
			async withdraw(data){
				this.loading = true;
				await uni.request({
					url: '/member/money/withdraw',
					method: 'POST',
					data: {
						money: this.money,
						account: this.bankData.id,
						pay_pass: data.pay_pass
					},
					success: res => {
						// 1.0.5升级
						this.loading = false;
						// 跳转成功
						this.$wanlshop.to('/pages/page/success?type=withdraw');
					},
					complete: () => {
						this.loading = false;
					}
				});
			},
			replaceInput(e){
				this.money = e.target.value;
				this.servicemoney = e.target.value > 0 ? (e.target.value*this.servicefee/100).toFixed(2) : 0;
			},
			emptyInput(){
				this.money = null;
			},
			moneyAll(){
				this.money = this.usermoney;
			},
			getCode(str){
				str = str.replace(/\s+/g,"");
				return str.substring(str.length-4);
			},
			getType(key){
				return ['储蓄卡', '信用卡'][key];
			},
			
			inputCode(e) {
				this.code[this.currentFocus - 1] = e;
				if (this.currentFocus == 6) {
					this.withdraw({pay_pass:this.code.join("").replace(/,/g, '')});
					this.$refs.popup.close('bottom');
					this.emptyCode()
				}
				if (this.currentFocus <= 6) {
					this.currentFocus++;
				}
			},
			deleteCode() {
				this.currentFocus--;
				this.code.splice(-1, 1);
			},
			emptyCode() {
				this.code = [];
				this.currentFocus = 0;
			},
		}
	}
</script>

<style>
	@import url("@/pages/user/auth/auth.css");
	
	/deep/.fade-out.uni-transition {
		background: rgba(0, 0, 0, .4) !important;
	}
	
	.popup-modal {
		background-color: #fff;
		height: 900rpx;
		width: 100%;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
	
	}
	.wanl-withdraw .money .symbol{
		font-size: 60rpx;
		margin-right: 10rpx;
	}
	
	.wanl-withdraw .money .price{
		display: flex;
		align-items: center;
	}
	.wanl-withdraw .money .price input{
		/* #ifdef MP */
		height: 100rpx;
		min-height: 100rpx;
		/* #endif */
		width: 100%;
		font-size: 100rpx;
	}
	
	.wanl-withdraw .bank{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 20rpx 25rpx;
	}
	.wanl-withdraw .bank image{
		width: 100rpx;
		height: 100rpx;
		margin-right: 25rpx;
	}
	.wanl-withdraw .bank .content{
		flex: 1;
	}
	.wanl-withdraw .bank .action{
		
	}
	
</style>
